<template>
  <div class="post-detail-page w-690">
    <nav v-if="post">
      <ol class="breadcrumb post-detail-breadcrumb">
        <li class="breadcrumb-item">
          <router-link to="/">首页</router-link>
        </li>
        <li class="breadcrumb-item">
          <router-link :to="`/column/${post.column}`">专栏首页</router-link>
        </li>
        <li class="breadcrumb-item active">{{ post.title }}</li>
      </ol>
    </nav>
    <article class="mb-5 pb-3" v-if="post">
      <template v-if="headImage">
        <img :src="headImage" class="rounded-lg img-fluid my-4" />
      </template>
      <h2 class="mb-4">{{ post.title }}</h2>
      <div :class="detailClass">
        <div class="col" v-if="typeof post.author === 'object'">
          <user-profile :user="post.author"></user-profile>
        </div>
        <span class="text-muted col text-right font-italic">
          发表于：{{ post.createdAt }}
        </span>
      </div>
      <div v-if="content" v-html="content"></div>
      <div v-if="isShow" class="btn-group mt-5">
        <router-link :to="`/edit/${post._id}`" class="btn btn-primary me-3">
          编辑
        </router-link>
        <button class="btn btn-danger" @click="del()">删除</button>
      </div>
    </article>
    <modal :width="30" v-model="showModal" @confirm="handleConfirm">
      <template #header>
        <span>删除</span>
      </template>
      <span>确定要删除当前文章吗？</span>
    </modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import {
  GlobalDataProps,
  PostProps,
  AuthorProps,
  ResponseType
} from '../store'
import MarkdownIt from 'markdown-it'
import UserProfile from '../components/UserProfile.vue'
import Modal from '../components/Modal.vue'
import axios from '@/libs/axios'
import createMessage from '@/components/createMessage'

type PostType = PostProps | undefined;

const detailClass = [
  'border-top',
  'border-bottom',
  'py-3',
  'mb-5',
  'align-items-center',
  'row',
  'g-0'
]

export default defineComponent({
  components: {
    UserProfile,
    Modal
  },
  setup () {
    const route = useRoute()
    const router = useRouter()
    const store = useStore<GlobalDataProps>()
    const md = new MarkdownIt()

    const postId = route.params.id

    onMounted(() => {
      store.dispatch('fetchPost', postId)
    })

    // 当前文章
    const post = computed<PostType>(() => {
      return store.getters.getPostById(postId)
    })

    // 当前文章头图
    const headImage = computed(() => {
      if (post.value && post.value.image && post.value.image.url) {
        const { url } = post.value.image
        return url + '?x-oss-process=image/resize,w_850'
      } else {
        return null
      }
    })

    // 当前文章内容
    const content = computed(() => {
      if (post.value && post.value.content) {
        const { isHTML, content } = post.value
        return isHTML ? content : md.render(content)
      } else {
        return null
      }
    })

    // 是否展示操作区域
    const isShow = computed<boolean>(() => {
      const { isLogin, _id } = store.state.user
      if (isLogin && post.value && post.value.author) {
        return (post.value.author as AuthorProps)._id === _id
      } else {
        return false
      }
    })

    const showModal = ref(false)

    const del = () => {
      showModal.value = true
    }

    const handleConfirm = () => {
      axios({
        url: `/posts/${postId}`,
        method: 'delete'
      }).then((res) => {
        const rawData: ResponseType<PostProps> = res.data
        if (rawData.code === 0) {
          showModal.value = false
          createMessage('success', '删除成功，2秒后跳转至个人专栏', 2000)
          setTimeout(() => {
            router.go(-1)
          }, 2000)
        }
      })
    }

    return {
      post,
      headImage,
      content,
      isShow,
      detailClass,
      showModal,
      del,
      handleConfirm
    }
  }
})
</script>

<style scoped>
.w-690 {
  width: 690px;
  margin: 0 auto;
}

.post-detail-breadcrumb {
  padding: 0.5rem 1rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}

.rounded-lg {
  border-radius: 0.3rem;
}

.text-right {
  text-align: right;
}

.font-italic {
  font-style: italic;
}
</style>
